<template>
	<div style="width: 100%;">


		<todoList></todoList>
		<warningList></warningList>

		<template v-if="setting.moduleOne">
			<wasteGas v-if="setting.moduleOne == 'WASTE_GAS'"></wasteGas>
			<wasteWater v-if="setting.moduleOne == 'WASTE_WATER'"></wasteWater>
			<wasteWf v-if="setting.moduleOne == 'DANGER_WASTE'"></wasteWf>
			<wasteGf v-if="setting.moduleOne == 'COMMON_WASTE'"></wasteGf>
			<hpSoil v-if="setting.moduleOne == 'SOIL'"></hpSoil>
			<hpNoise v-if="setting.moduleOne == 'NOISE'"></hpNoise>
		</template>
		<template v-if="setting.moduleTwo">
			<wasteGas v-if="setting.moduleTwo == 'WASTE_GAS'"></wasteGas>
			<wasteWater v-if="setting.moduleTwo == 'WASTE_WATER'"></wasteWater>
			<wasteWf v-if="setting.moduleTwo == 'DANGER_WASTE'"></wasteWf>
			<wasteGf v-if="setting.moduleTwo == 'COMMON_WASTE'"></wasteGf>
			<hpSoil v-if="setting.moduleTwo == 'SOIL'"></hpSoil>
			<hpNoise v-if="setting.moduleTwo == 'NOISE'"></hpNoise>
		</template>
		<template v-if="setting.moduleThree">
			<wasteGas v-if="setting.moduleThree == 'WASTE_GAS'"></wasteGas>
			<wasteWater v-if="setting.moduleThree == 'WASTE_WATER'"></wasteWater>
			<wasteWf v-if="setting.moduleThree == 'DANGER_WASTE'"></wasteWf>
			<wasteGf v-if="setting.moduleThree == 'COMMON_WASTE'"></wasteGf>
			<hpSoil v-if="setting.moduleThree == 'SOIL'"></hpSoil>
			<hpNoise v-if="setting.moduleThree == 'NOISE'"></hpNoise>
		</template>
		<template v-if="setting.moduleFour">
			<wasteGas v-if="setting.moduleFour == 'WASTE_GAS'"></wasteGas>
			<wasteWater v-if="setting.moduleFour == 'WASTE_WATER'"></wasteWater>
			<wasteWf v-if="setting.moduleFour == 'DANGER_WASTE'"></wasteWf>
			<wasteGf v-if="setting.moduleFour == 'COMMON_WASTE'"></wasteGf>
			<hpSoil v-if="setting.moduleFour == 'SOIL'"></hpSoil>
			<hpNoise v-if="setting.moduleFour == 'NOISE'"></hpNoise>
		</template>
		<template v-if="setting.moduleFive">
			<wasteGas v-if="setting.moduleFive == 'WASTE_GAS'"></wasteGas>
			<wasteWater v-if="setting.moduleFive == 'WASTE_WATER'"></wasteWater>
			<wasteWf v-if="setting.moduleFive == 'DANGER_WASTE'"></wasteWf>
			<wasteGf v-if="setting.moduleFive == 'COMMON_WASTE'"></wasteGf>
			<hpSoil v-if="setting.moduleFive == 'SOIL'"></hpSoil>
			<hpNoise v-if="setting.moduleFive == 'NOISE'"></hpNoise>
		</template>
		<template v-if="setting.moduleSix">
			<wasteGas v-if="setting.moduleSix == 'WASTE_GAS'"></wasteGas>
			<wasteWater v-if="setting.moduleSix == 'WASTE_WATER'"></wasteWater>
			<wasteWf v-if="setting.moduleSix == 'DANGER_WASTE'"></wasteWf>
			<wasteGf v-if="setting.moduleSix == 'COMMON_WASTE'"></wasteGf>
			<hpSoil v-if="setting.moduleSix == 'SOIL'"></hpSoil>
			<hpNoise v-if="setting.moduleSix == 'NOISE'"></hpNoise>
		</template>


		<div class="pl10 pr10">
			<div class="displayFlex mb18 pl10">
				<div style="font-size: 15px;color: #5A5A5A;">生产及原辅材料统计</div>
				<div v-if="listHeaderMock.mock6" style="color: #888;" class="font12 ml10">以下数据为演示数据</div>
			</div>
			<div style="background: #fff;border-radius: 20px;padding: 20px;" @click="gotoPage('produceOrder')"
				class="point">
				<div v-for="(item,index) in dataList4" :key="index" class="mb5">
					<div class="displayFlex text-center font14" style="height: 74px;">
						<div style="background: #3F44C9;height: 100%;width: 301px;padding: 15px 0;" class="bra8">
							<div style="margin-bottom: 5px;color: #9EA1E4;">{{item.productName}}</div>
							<div style="color: #fff;">{{item.qty}}{{item.unitValue}}</div>
						</div>

						<div style="height: 100%;width: 200px;border: 1px solid#EDECF1;padding: 15px 0;"
							:style="{'background':'#fff'}">
							<div style="margin-bottom: 5px;color: #A1A1A1;" class="textOver">二氧化碳（Kg）</div>
							<div style="color: #333;">{{item.cQty || 0}}</div>
						</div>
						<template v-if="item.energyList && item.energyList.length > 0">
							<div v-for="(item2,index2) in item.energyList" :key="index2"
								style="height: 100%;width: 200px;border: 1px solid#EDECF1;padding: 15px 0;"
								:style="{'background':'#fff'}">
								<div style="margin-bottom: 5px;color: #A1A1A1;" class="textOver">
									{{item2.energyName}}（{{item2.unit}}）
								</div>
								<div style="color: #333;">{{item.cQty || 0}}</div>
							</div>
						</template>

						<template v-if="item.materialList && item.materialList.length > 0">
							<div v-for="(item2,index2) in item.materialList" :key="index2"
								style="height: 100%;width: 200px;border: 1px solid#EDECF1;padding: 15px 0;"
								:style="{'background':'#fff'}">
								<div style="margin-bottom: 5px;color: #A1A1A1;" class="textOver">
									{{item2.materialName}}（{{item2.unitValue}}）
								</div>
								<div style="color: #333;">{{item.cQty || 0}}</div>
							</div>
						</template>
					</div>
				</div>

				<el-empty v-if="dataList4.length == 0" />
			</div>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	import HomeMock from "@/assets/mock/HomeMock.json"
	import todoList from "@/components/home/todoList"
	import warningList from "@/components/home/warningList"
	import wasteGas from "@/components/home/wasteGas"
	import wasteWater from "@/components/home/wasteWater"
	import hpSoil from "@/components/home/hpSoil"
	import hpNoise from "@/components/home/hpNoise"
	import wasteWf from "@/components/home/wasteWf"
	import wasteGf from "@/components/home/wasteGf"
	import {
		Session
	} from '@/utils/storage.js';

	let that
	export default {
		name: "newHome",
		components: {
			todoList,
			warningList,
			wasteGas,
			wasteWater,
			hpSoil,
			hpNoise,
			wasteWf,
			wasteGf
		},
		data() {
			return {
				ticketId: this.$store.state.token,
				setting: {},
				dataList4: [],
				productId: '',
				listHeaderMock: {
					mock6: false,
				}
			}
		},
		created: function() {},
		mounted: function() {
			that = this;
			setTimeout(function(){
				that.setting = Session.get('setting') || {}
				that.$forceUpdate()
			},1000)
			that.ajax({
				url: 'licence/getUserLicenceStatus',
				data: {},
				contentType: 'application/x-www-form-urlencoded',
				success: (res) => {
					
					if (res.data) {
						if (res.data == "NOT_ACTIVATED" || res.data == "EXPIRE_ADMIN_ACTIVATED") {
							return that.$router.push("/activated?ticketId=" + this.$store.state.token)
						}
					}

					that.getYearProductQtyList()
				},
			})

		},

		methods: {
			gotoPageNew(item) {
				let routerUrl = ""
				if (item.scheduleType == "WASTE_GAS" || item.scheduleType == "WASTE_WATER") routerUrl = "/problemTicketDet?id=" + item.id
				
				if (routerUrl) {
					routerUrl = routerUrl + "&ticketId=" + this.$store.state.token
					that.$router.push(routerUrl)
				}
			},

			gotoWarnDet(item) {
				let url
				if (item.scheduleType == 'WASTE_WATER') url = "/wasteWater/warningCenterDet?id=" + item.id
				if (item.scheduleType == 'WASTE_GAS') url = "/wasteGas/warningCenterDet?id=" + item.id

				if (url) {
					url = url + "?ticketId=" + this.$store.state.token
					that.$router.push(url)
				}
			},

			gotoPage(type) {
				//console.log(type)
				let routerUrl = "filesManage/pdfManage"
				if (type == 'risk') routerUrl = "riskPreview/risk"
				if (type == 'monitorPollution') routerUrl = "produceManage/producePreview"
				if (type == 'waste') routerUrl = "waste/wasteOrder"
				if (type == 'swEntWaste') routerUrl = "swEntWaste/order"
				if (type == 'produceOrder') routerUrl = "produceManage/order"
				if (type.includes("废气")) {
					if (type.includes("在线监测")) routerUrl = "/wasteGas/onlineSurvey"
					if (type.includes("自行监测")) routerUrl = "/wasteGas/survey"
					if (type.includes("台账")) routerUrl = "/wasteGas/order"
					if (type.includes("巡检")) routerUrl = "/entScheduleAddPlan"
				}
				if (type.includes("废水")) {
					if (type.includes("在线监测")) routerUrl = "/wasteWater/onlineSurvey"
					if (type.includes("自行监测")) routerUrl = "/wasteWater/survey"
					if (type.includes("台账")) routerUrl = "/wasteWater/order"
					if (type.includes("巡检")) routerUrl = "/entScheduleAddPlan"
				}
				if (type.includes("巡检计划")) routerUrl = "/entScheduleAddPlan"
				if (type.includes("巡检任务")) routerUrl = "/entScheduleAddPlan"

				if (routerUrl) {
					routerUrl = routerUrl + "?ticketId=" + this.$store.state.token
					that.$router.push(routerUrl)
				}
			},

			getYearProductQtyList() {
				that.ajax({
					url: 'homepage/getYearProductQtyList',
					contentType: 'application/json',
					data: JSON.stringify({
						productId: that.productId
					}),
					success: function(result) {
						that.listHeaderMock.mock6 = false
						if (result.status == -6) {
							that.listHeaderMock.mock6 = true
							result.data = HomeMock.chansehng
						}
						if (result.data) {
							that.dataList4 = result.data

							for (let item of that.dataList4) {
								if (item.energyList && item.energyList.length > 0) {
									for (let item2 of item.energyList) {
										item2.bg = "#F8F9FB"
										if (item2.energyName == '电') item2.bg = '#EBE2FD'
										else if (item2.energyName == '天然气' || item2.energyName == '氢气') item2
											.bg = '#D4F9F7'
										else if (item2.energyName.includes('蒸汽')) item2.bg = '#E4FFE9'
										else item2.bg = '#FCF5D1'

									}
								}
							}
						}
					},
				})
			},


			randomColor() {
				return "#" + (function(color) {
					return new Array(7 - color.length).join("0") + color;
				})((Math.random() * 0x1000000 | 0).toString(16));
			},

			formPieChart(chartId, value = 0) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: '#FD4851'
					},
					{
						offset: 0.2,
						color: '#FF8C54'
					},
					{
						offset: 0.4,
						color: '#FFDE00'
					},
					{
						offset: 0.6,
						color: '#33D5AC'
					},
					{
						offset: 0.8,
						color: '#0878F5'
					},
					{
						offset: 1,
						color: '#0878F5'
					}
				]);
				// colorSet倒过来
				const colorSet = [
					[0.1, '#FF0000'],
					[1, color]
				];

				option = {
					series: [{
						type: 'gauge',
						startAngle: 0,
						endAngle: 180,
						min: 240, // min和max倒过来
						max: 0,
						splitNumber: 8,
						clockwise: false, // 设置数据逆时针增长
						itemStyle: {
							color: '#eee', // 用于替代背景色的颜色
							borderColor: '#eee' // 用跟上面一样的颜色遮住露出的背景色
						},
						progress: {
							show: true,
							roundCap: false, // 只适用于平角
							width: 20
						},
						emphasis: {
							// 禁用高亮（从v5.3.0开始支持）低版本可以通过设置color为'inherit'或与普通状态相同颜色实现
							disabled: true
						},
						pointer: {
							show: false // 隐藏指针
						},
						axisLine: {
							roundCap: false, // 只适用于平角
							lineStyle: {
								width: 20,
								color: colorSet // 渐变色作为轴的背景色
							}
						},
						axisTick: {
							show: false,
							splitNumber: 2,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						splitLine: {
							show: false,
							length: 8,
							lineStyle: {
								width: 3,
								color: '#999',
								roundCap: false
							}
						},
						axisLabel: {
							show: false,
							distance: 105,
							color: '#999',
							fontSize: 20
						},
						title: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							value: value
						}]
					}]
				};

				option && myChart.setOption(option);
			},


			formcategory(charyId, xAxisData, seriesData) {
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					grid: {
						top: "12%",
						bottom: "10%",
						left: "5%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: seriesData,
						type: 'line',
						label: {
							show: true,
							position: 'top'
						}
					}]
				};

				option && myChart.setOption(option);

			},


			formBarChart(id, dataList, title, isMoreBar = false) {
				let xNames = []
				let yValues = []
				let seriers = []
				let chartDom = document.getElementById(id);
				let myChart = echarts.init(chartDom);
				let option;
				let legend = {
					data: []
				}

				if (isMoreBar) {
					for (let key = 1; key <= 12; key++) {
						xNames.push(key + '月')
					}
					for (let key in dataList) {
						let colors = [{
							color1: "#91bbf7",
							color2: "#8b93f9"
						}, {
							color1: "#f7d991",
							color2: "#f9d28b"
						}, {
							color1: "#f7ab91",
							color2: "#f98b8b"
						}]
						let item = dataList[key]
						let thisYValues = []
						for (let item2 of item.dataList) {
							thisYValues.push(item2.qty || 0)
						}
						let legendItem = {
							name: item.materialName,
							textStyle: {
								color: '#333'
							}
						}
						legend.data.push(legendItem)
						let serierItem = {
							name: item.materialName,
							data: thisYValues,
							barWidth: 20,
							type: 'bar',
							label: {
								normal: {
									show: true,
									position: 'top',
									color: '#333',
									fontSize: 12,
									fontWeight: 'bold',
									formatter: function(params) {
										if (params.value > 0) {
											var str = params.value;
											// if (xNames[params.dataIndex]) {
											// 	str += '\n' + xNames[params.dataIndex] + '元'
											// }
											return str;
										} else {
											return "";
										}
									}
								}
							},
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: that.randomColor() // 0% 处的颜色
									}, {
										offset: 1,
										color: that.randomColor() // 100% 处的颜色
									}], false)
								}
							}
						}
						seriers.push(serierItem)
					}
				} else {
					for (let item of dataList) {
						xNames.push(item.monthStr)
						yValues.push(item.amount || 0)
					}
					seriers = [{
						data: yValues,
						barWidth: 20,
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'top',
								color: '#333',
								fontSize: 12,
								fontWeight: 'bold',
								formatter: function(params) {
									if (params.value > 0) {
										var str = params.value;
										// if (xNames[params.dataIndex]) {
										// 	str += '\n' + xNames[params.dataIndex] + '元'
										// }
										return str;
									} else {
										return "";
									}
								}
							}
						},
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: "#91bbf7" // 0% 处的颜色
								}, {
									offset: 1,
									color: "#8b93f9" // 100% 处的颜色
								}], false)
							}
						}
					}]
				}

				//console.log(seriers)

				option = {
					tooltip: {
						show: true,
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: legend,
					grid: {
						show: false,
						top: '20%',
						right: '10%',
						bottom: '10%',
						left: '10%'
					},
					xAxis: {
						type: 'category',
						data: xNames,
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#91bbf7',
								width: 2
							}
						},
						axisLabel: {
							textStyle: {
								color: '#333',
								fontSize: 14,
								fontWeight: 'bold'
							}
						},
					},
					yAxis: [{
						name: title,
						nameTextStyle: {
							color: "#333"
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#91bbf7',
								width: 2
							}
						},
						axisLabel: {
							show: false,
							textStyle: {
								color: '#333',
								fontSize: 14,
								fontWeight: 'bold'
							}
						},
					}],
					series: seriers
				};

				option && myChart.setOption(option);
			},


			formChart(id, dataList, title) {
				let chartDom = document.getElementById(id);
				let myChart = echarts.init(chartDom);
				let option;
				let names = []
				let datas = []

				for (let item of dataList) {
					names.push({
						name: item.title,
						max: 5
					})
					datas.push(item.score)
				}

				//console.log(datas)

				option = {

					legend: {
						show: false
					},
					radar: {
						// shape: 'circle',
						indicator: names
					},
					series: [{
						name: '',
						type: 'radar',
						data: [{
							value: datas,
							name: 'name',
							label: {
								show: true,
								formatter: function(params) {
									return params.value;
								}
							}
						}]
					}]
				};

				option && myChart.setOption(option);
			},



		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.text_overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: break-all;
	}
	

	>>>.el-progress__text {
		font-size: 23px !important;
		color: #000 !important;
	}

	>>>.el-tabs__item {
		padding: 0 20px 0 0;
	}
</style>